<template>
  <div class="stored-card-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">💳 储值卡管理</span>
          <div class="header-actions">
            <el-button type="primary" @click="handleRecharge">
              <el-icon><Wallet /></el-icon>
              会员充值
            </el-button>
            <el-button type="success" @click="handleSettings">
              <el-icon><Setting /></el-icon>
              充值设置
            </el-button>
          </div>
        </div>
      </template>

      <!-- 统计 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <el-statistic title="储值卡总数" :value="totalCards" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="总储值金额" :value="totalBalance" prefix="¥" value-style="color: #67c23a" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="今日充值" :value="todayRecharge" prefix="¥" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="今日消费" :value="todayConsumption" prefix="¥" />
        </el-col>
      </el-row>

      <el-table :data="tableData" border stripe>
        <el-table-column prop="cardNo" label="卡号" width="150" />
        <el-table-column prop="memberName" label="会员姓名" width="120" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="balance" label="余额" width="120">
          <template #default="{ row }">
            <span style="color: #67c23a; font-weight: bold;">¥{{ row.balance.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalRecharge" label="累计充值" width="120">
          <template #default="{ row }">
            ¥{{ row.totalRecharge.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="totalConsumption" label="累计消费" width="120">
          <template #default="{ row }">
            ¥{{ row.totalConsumption.toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="lastRecharge" label="最后充值" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'info'">
              {{ row.status === 'active' ? '正常' : '冻结' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleViewDetail(row)">详情</el-button>
            <el-button link type="success" @click="handleRechargeCard(row)">充值</el-button>
            <el-button link type="warning" @click="handleAdjust(row)">调整</el-button>
            <el-button link type="danger" @click="handleFreeze(row)">冻结</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Wallet, Setting } from '@element-plus/icons-vue'

const totalCards = ref(8956)
const totalBalance = ref(2456789)
const todayRecharge = ref(45678)
const todayConsumption = ref(23456)

const tableData = ref([
  {
    cardNo: 'SC001', memberName: '张三', phone: '13800138001',
    balance: 2500.00, totalRecharge: 5000, totalConsumption: 2500,
    lastRecharge: '2024-01-20 14:30', status: 'active'
  },
  {
    cardNo: 'SC002', memberName: '李四', phone: '13800138002',
    balance: 1500.00, totalRecharge: 3000, totalConsumption: 1500,
    lastRecharge: '2024-01-18 10:20', status: 'active'
  }
])

const handleRecharge = () => {
  ElMessage.info('会员充值')
}

const handleSettings = () => {
  ElMessage.info('充值设置')
}

const handleViewDetail = () => {
  ElMessage.info('查看详情')
}

const handleRechargeCard = () => {
  ElMessage.info('充值')
}

const handleAdjust = () => {
  ElMessage.info('余额调整')
}

const handleFreeze = () => {
  ElMessage.success('冻结成功')
}
</script>

<style scoped>
.stored-card-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.stat-cards {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}
</style>

